<template>
  <div class="show">
    <div class="title">我的评论</div>
    <div class="all" v-loading="loading">
      <ul class="msglist">
        <li class="list"
            @mouseenter="enter(index)"
            @mouseleave="leave(index)"
            v-for="(data,index) in replay.arr" :key="index"
        >
          <div style="margin-bottom: 20px">
            <span class="date"><el-icon><Clock/></el-icon>{{data.replayTime}}~评论了动态</span><br>
          </div>
          <p class="titlelist"><el-icon><Promotion/></el-icon>{{data.message.title}}</p>
          <span class="content">{{data.replay}}</span><br>

          <span class="manager" v-if="flag && index === current">
            <el-tooltip :visible="visible.edit" placement="top">
              <template #content>
                <span>修改评论</span>
              </template>
              <el-button @click="editReplay(data)"
                         @mouseenter="visible.edit = true"
                         @mouseleave="visible.edit = false"
                         round>
                <el-icon><Edit/></el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip :visible="visible.detele" placement="top">
              <template #content>
                <span>删除评论</span>
              </template>
              <el-button @click="deleteReplay(data.id)"
                         @mouseenter="visible.detele = true"
                         @mouseleave="visible.detele = false"
                         round>
                <el-icon><Delete/></el-icon>
              </el-button>
            </el-tooltip>
          </span>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-config-provider :locale="zhCn">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageNumChange"
            :current-page="pagination.pageNum"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </el-config-provider>
    </div>
  </div>
</template>

<script>

import {Edit,Clock,Promotion,Delete} from '@element-plus/icons-vue';
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default {
  name: "myReplay",
  components: {Edit,Clock,Promotion,Delete},
  setup(){
    const {proxy} = getCurrentInstance()
    let flag = ref(false)
    let current = ref(null)//鼠标移动到的当前页
    let loading = ref(false)
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 3 //每页条数
    })
    let visible = reactive({
      edit: false,
      detele: false
    })
    let replay = reactive({
      arr: []
    })
    onMounted(()=>{
      getReplay()
    })
    function getReplay(){
      loading.value = true
      // eslint-disable-next-line no-undef
      proxy.$axios.get(`/replays/${pagination.pageNum}/${pagination.pageSize}/${$cookies.get("name")}`).then(
          response => {
            console.log(response.data)
            replay.arr = [...response.data.list]
            pagination.total = response.data.total
            pagination.pageNum = response.data.pageNum
            pagination.pageSize = response.data.pageSize
            loading.value = false
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getReplay()
    }
    function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getReplay()
    }
    function enter(index) {
      flag.value = true
      current.value = index
    }
    function leave(index) {
      flag.value = false;
      current.value = index;
    }
    function editReplay(data){
      ElMessageBox.prompt('评论内容','修改评论',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, //匹配所有字符串，除了换行符除外
        inputErrorMessage: '内容不能为空',
        inputValue: data.replay
      }).then(({value}) =>{
        if (value === data.replay){
          ElMessage({
            type: 'info',
            message: '评论没有改动',
          })
          return
        }
        let info = {
          id: data.id,
          replay: value,
          replayTime: new Date(),
        }
        proxy.$axios.put(
            '/replay/update',
            {
              ...info
            }
        ).then(
            response => {
              if (response.data){
                ElMessage({
                  type: 'success',
                  message: '修改成功',
                  center: true
                })
                getReplay()
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消修改',
        })
      })
    }
    function deleteReplay(id) {
      ElMessageBox.confirm(
          '是否永久删除该评论?',
          '警告',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }
      ).then(() => {
        proxy.$axios.delete(`/replay/detele/${id}`).then(
            response => {
              if (response.data){
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
                getReplay()
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
    }
    return{
      flag,
      current,
      pagination,
      visible,
      loading,
      replay,
      pageNumChange,
      pageSizeChange,
      enter,
      leave,
      editReplay,
      deleteReplay,
      zhCn
    }
  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 610px;
  border: 5px solid lightcyan;
  transition: all 0.9s;
  border-radius: 10px;
}
.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
}
.all{
  list-style-position: inside;
}
.all .date {
  color: #0AEECBFF;
  font-size: 15px;
}
.date{
  width: 200px;
  position: absolute;
  margin-top: 5px;
  left: 20px;
}
.list {
  background-color: #eee;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0px;
  position: relative;
  transition: all .3s ease;
}
.title {
  text-align: center;
  font-size: 20px;
  margin: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.titlelist{
  font-size: 10px;
}
.manager {
  position: absolute;
  right: 30px;
  bottom: 10px;
  color: tomato;
  cursor: pointer;
  transition: all .3s ease;
}
.content{
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  cursor: pointer;
  color: #28b2b4;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>